import React, { useEffect, useState, useContext } from "react";
import { history } from "umi";
import { Row, Col, Button } from "antd";
import {
  RightOutlined,
  CaretRightOutlined,
  UserOutlined,
} from "@ant-design/icons";
import MyContent from "@/store/my-context";
import IconFont from "@/components/iconfont";
import moment from "moment";
import Swiper from "@/components/swiper";
import {
  personalized,
  privatecontentList,
  personalizedNewsong,
  personalizedMv,
  personalizeDjprogram,
  playlistDetail
} from "@/api";
import styles from "./list.less";
import {contxetType} from '@/interfaces/types'
import {setPlayList} from "@/store/functions"
import {numberFormat} from '@/interfaces/functions'
import recommendImg from "@/assets/recommend-img.png";
import MyImg from '@/components/myimg'
import {Link} from 'umi'
const Recommend: React.FC = ({ children }) => {
  const day = moment(Date.now()).format("DD");
  const [recommend, setRecommend] = useState([]);
  const [privatecontents, setPrivatecontent] = useState([]);
  const [newSongList, setNewSongList] = useState([]);
  const [personalizedMvList, setPersonalizedMvList] = useState([]);
  const [djProgramList, setDjProgram] = useState([]);
  const { state,dispatch } = useContext<contxetType>(MyContent);

  useEffect(() => {
    const requestAction = async () => {
      try {
        const { result } = await personalized();
        setRecommend(result);
      } catch (err) {
        console.log(err);
      }
    };
    const requestPrivatecontent = async () => {
      try {
        const { result } = await privatecontentList({
          limit: 4,
          offset: 1,
        });
        setPrivatecontent(result);
      } catch (err) {
        console.log(err);
      }
    };
    const requestNewsong = async () => {
      try {
        const { result } = await personalizedNewsong({
          limit: 10,
        });
        setNewSongList(result);
      } catch (err) {
        console.log(err);
      }
    };

    const requestPersonalizedMv = async () => {
      try {
        const { result } = await personalizedMv({
          limit: 4,
        });
        console.log(result)
        setPersonalizedMvList(result);
      } catch (err) {
        console.log(err);
      }
    };

    const requestPersonalizeDjprogram = async () => {
      try {
        const { result } = await personalizeDjprogram({
          limit: 4,
        });
        setDjProgram(result);
      } catch (err) {
        console.log(err);
      }
    };
    requestAction();
    requestPrivatecontent();
    requestNewsong();
    requestPersonalizedMv();
    requestPersonalizeDjprogram();
  }, []);

  const onPlayMusic = (item: any) => {
    try {
      playlistDetail({ id: item.id }).then((res: any) => {
        if(res?.playlist?.trackIds?.length > 0){
        let ids:Array<number> = []
          if(res?.playlist?.trackIds?.length > 100){
            res?.playlist?.trackIds?.splice(100)//限制加入100首
          }
          res?.playlist?.trackIds?.map((resId:{id:number})=>{
            ids.push(resId.id)
          })
          setPlayList(ids,{text:'歌单页面',href:'优化项'},state).then(result =>{
            // console.log(result);
            if(result){
            dispatch(result)
            }
          }).catch((err)=>{
            console.log(err);
          })
        }
      });
    } catch (err) {
      console.log(err);
    }
  };
  return (
    <>
      <Swiper />
      <div className={styles["section"]}>
        <div className={styles["title"]}>
          <span>推荐歌单</span>
          <RightOutlined />
        </div>
        <ul className={styles["recommend-list"]}>
          <li
            className={styles["recommend-first"]}
            onClick={() => {
              history.push({
                pathname: "/recommend/detail",
              });
            }}
          >
            <div className={styles["recommend-info"]}>
              <img src={recommendImg}/>
              <div className={styles["recommend-top"]}>
                根据您的音乐口味生成每日更新
              </div>
              <div className={styles["recommend-day"]}>{day}</div>
              <div className={styles["recommend-play"]}>
                <CaretRightOutlined />
              </div>
            </div>
            <p>每日歌曲推荐</p>
          </li>
          {recommend.map((item: any) => (
            <li
              key={item.id}
              onClick={() => {
                history.push({
                  pathname: "/recommend/detail",
                });
              }}
            >
              <div className={styles["recommend-info"]}>
                <MyImg src={item.picUrl} imgSize={{width:136}}/>
                <div className={styles["recommend-top"]}>
                  <CaretRightOutlined />
                  <span>{numberFormat(item.playCount,10000)}</span>
                </div>
                <div className={styles["recommend-bottom"]}>
                  <UserOutlined style={{ transform: "translate(0,-1px)" }} />{" "}
                  {item?.creator?.nickname}
                </div>
                <div
                  className={styles["recommend-play"]}
                  onClick={(event) => {
                    event.stopPropagation();
                    onPlayMusic(item);
                  }}
                >
                  <CaretRightOutlined />
                </div>
              </div>
              <p>{item.name}</p>
            </li>
          ))}
        </ul>
      </div>
      <div className={styles["section"]} style={{ marginTop: "50px" }}>
        <div className={styles["title"]}>
          <span>独家放送</span>
          <RightOutlined />
        </div>
        <ul className={styles["music-list"]}>
          {privatecontents.map((item: any, index: number) => (
            <li key={item.id}>
              <div className={styles["music-info"]}>
                <img src={item.picUrl}/>
                <div className={styles["music-play"]}>
                  <CaretRightOutlined />
                </div>
              </div>
              <p>{item.name}</p>
            </li>
          ))}
        </ul>
      </div>
      <div className={styles["section"]} style={{ marginTop: "50px" }}>
        <div className={styles["title"]}>
          <span>最新音乐</span>
          <RightOutlined />
        </div>
        <Row gutter={24}>
          <Col span={12}>
            <ul className={styles["new-music-container"]}>
              {newSongList.slice(0, 5).map((item: any, index: number) => (
                <li key={item.id}>
                  <div className={styles["new-music-img"]}>
                    <MyImg src={item?.song?.album?.picUrl} imgSize={{width:60}} />
                  </div>
                  <div style={{ marginLeft: "10px" }}>
                    {index < 10 ? `0${index + 1}` : index + 1}
                  </div>
                  <div className={styles["new-music-info"]}>
                    <p>
                      {item.name}
                      <span>{item.song?.alias.join("")}</span>
                    </p>
                    <p>{item.song?.artists[0]?.name}</p>
                  </div>
                  <div className={styles["new-music-play"]}>
                    <IconFont type="iconbofang1" />
                  </div>
                </li>
              ))}
            </ul>
          </Col>
          <Col span={12}>
            <ul className={styles["new-music-container"]}>
              {newSongList.slice(5, 10).map((item: any, index: number) => (
                <li key={item.id}>
                  <div className={styles["new-music-img"]}>
                    <MyImg src={item?.song?.album?.picUrl} imgSize={{width:60}} />
                  </div>
                  <div style={{ marginLeft: "10px" }}>
                    {index < 10 ? `0${index + 6}` : index + 6}
                  </div>
                  <div className={styles["new-music-info"]}>
                    <p>
                      {item.name}
                      <span>{item?.song?.alias.join("")}</span>
                    </p>
                    <p>{item?.song?.artists[0]?.name}</p>
                  </div>
                  <div className={styles["new-music-play"]}>
                    <IconFont type="iconbofang1" />
                  </div>
                </li>
              ))}
            </ul>
          </Col>
        </Row>
      </div>
      <div className={styles["section"]} style={{ marginTop: "50px" }}>
        <div className={styles["title"]}>
          <span>推荐MV</span>
          <RightOutlined />
        </div>
        <ul className={styles["music-list"]}>
          {personalizedMvList.map((item: any, index: number) => (
            <li key={item.id}>
              <div className={styles["music-top"]}>
                <CaretRightOutlined />
                <span>{item.playCount}</span>
              </div>
              <Link to={`/recommend/mv?id=${item.id}`} className={styles["music-info"]}>
                <img src={item.picUrl} alt="" />
              </Link>
              <p>{item.name}</p>
              <p className={styles["artist-name"]}>{item.artistName}</p>
            </li>
          ))}
        </ul>
      </div>

      <div className={styles["section"]} style={{ marginTop: "50px" }}>
        <div className={styles["title"]}>
          <span>主播电台</span>
          <RightOutlined />
        </div>
        <Row gutter={24}>
          <Col span={12}>
            <ul
              className={`${styles["new-music-container"]} ${styles["anchor-container"]}`}
            >
              {djProgramList.slice(0, 3).map((item: any, index: number) => (
                <li key={item.id}>
                  <div className={styles["new-music-img"]}>
                    <MyImg src={item.picUrl} imgSize={{width:90}} />
                    
                  </div>
                  <div className={styles["new-music-info"]}>
                    <p>{item?.program?.dj?.brand}</p>
                    <p>{item?.program?.dj?.nickname}</p>
                  </div>
                  <div className={styles["new-music-play"]}>
                    <IconFont type="iconbofang1" />
                  </div>
                </li>
              ))}
            </ul>
          </Col>
          <Col span={12}>
            <ul
              className={`${styles["new-music-container"]} ${styles["anchor-container"]}`}
            >
              {djProgramList.slice(3, 6).map((item: any, index: number) => (
                <li key={item.id}>
                  <div className={styles["new-music-img"]}>
                    <MyImg src={item.picUrl} imgSize={{width:90}} />
                  </div>
                  <div className={styles["new-music-info"]}>
                    <p>{item?.program?.dj?.brand}</p>
                    <p>{item?.program?.dj?.nickname}</p>
                  </div>
                  <div className={styles["new-music-play"]}>
                    <IconFont type="iconbofang1" />
                  </div>
                </li>
              ))}
            </ul>
          </Col>
        </Row>
      </div>
      <p className={styles["p-text"]}>
        现在可以根据个人喜好，自由调整首页栏目顺序啦~
      </p>
      <Button
        shape="round"
        danger
        style={{ display: "block", margin: "10px auto 0" }}
      >
        调整栏目顺序
      </Button>
    </>
  );
};
export default Recommend;
